<template>
  <card :title="feeOption.feeName" :showDivider="showDivider">
    <template #extra v-if="feeOption.type == 'basicFee'">
      <a-button type="primary" size="mini" @click="viewPriceCalendar">查看价格日历</a-button>
    </template>
    <page-form-row>
      <!-- 详细费用 -->
      <template v-for="(feeDetailItem, feeDetailIndex) in feeOption.childrenList" :key="feeDetailIndex">
        <page-form-item
          :label="feeDetailItem.showItemName || feeDetailItem.itemName"
          size="1/2"
          v-bind="formAttrs(feeDetailItem, feeDetailIndex)"
          :class="getPageFormItemClass(feeDetailIndex, feeOption.childrenList)"
        >
          <i-input-number
            :disabled="feeDetailItem.disabled"
            v-model="feeDetailItem.amount"
            @change="(val) => changeFn(val, feeDetailItem)"
          />
          <template #label-extra v-if="feeDetailItem.showCostTypeSwitch">
            <a-radio-group class="cost-type-radio" v-model="feeDetailItem.costType">
              <a-radio :value="10">收款</a-radio>
              <a-radio :value="20">付款</a-radio>
            </a-radio-group>
          </template>
        </page-form-item>
      </template>
      <!-- 存在 feeOption.remarkLabel 显示备注录入 -->
      <page-form-item v-if="feeOption.remarkLabel" class="mb-0" :label="feeOption.remarkLabel" size="1">
        <i-input v-model="feeOption.remark" :max-length="200" />
      </page-form-item>
    </page-form-row>
  </card>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    index: Number,
    list: Array,
    requiredKey: String,
    showDivider: {
      type: Boolean,
      default: true,
    },
    orderFormType: {
      type: String,
      default: '',
    },
  })
  const emit = defineEmits(['viewPriceCalendar', 'feeChange'])

  const feeOption = computed(() => {
    return props.list[props.index]
  })

  const changeFn = (val, feeDetailItem) => {
    emit('feeChange', feeDetailItem, val, props.index)
  }

  // 处理必填逻辑
  const formAttrs = (item, index) => {
    if (item.required) {
      return {
        field: `${props.requiredKey}${props.index}.childrenList.${index}.amount`,
        rules: { required: true, message: `请输入${item.itemName}` },
      }
    } else {
      return {}
    }
  }

  // 最后一行需要增加 mb-0 class
  const getPageFormItemClass = (index, list) => {
    // 不存在底部的备注输入框时
    if (!feeOption.value.remarkLabel) {
      let len = list.length
      let claxxList = []
      // 最后一行有两个
      if (len % 2 == 0 && index >= len - 2) {
        claxxList = ['mb-0']
      }
      // 最后一行有一个
      if (len % 2 == 1 && index >= len - 1) {
        claxxList = ['mb-0']
      }
      return claxxList
    } else {
      return []
    }
  }

  // 查看价格日历
  const viewPriceCalendar = () => {
    emit('viewPriceCalendar')
  }
</script>
<style lang="less" scoped>
  .cost-type-radio {
    .arco-radio {
      margin-right: 24px;
      padding-left: 0;
    }
    .arco-radio + .arco-radio {
      margin-right: 0;
    }
  }
  .amount-tag {
    width: 88px;
    height: 20px;
    background: #e8f7ff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    color: #3491fa;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
